	html {
		--uni-primary-color: #28a6ff;
		--uni-success-color: #52c41a;
		--uni-warning-color: #ffa641;
		--uni-danger-color: #f94866;
		--uni-white-color: #fff;
		--uni-dark-color: #000;
		--uni-black-color: #333;
		--uni-dim-gray-color: #666;
		--uni-gray-color: #808080;
		--uni-disabled-color: #999;
		--uni-pink-color: #e770fe;
		--uni-purple-color: #ab3ef3;
		--uni-blue-color: #31a0dc;
		--uni-background-color: #f5f5f5;
		--uni-font-size-9: 18rpx;
		--uni-font-size-10: 20rpx;
		--uni-font-size-11: 22rpx;
		--uni-font-size-12: 24rpx;
		--uni-font-size-13: 26rpx;
		--uni-font-size-14: 28rpx;
		--uni-font-size-15: 30rpx;
		--uni-font-size-16: 32rpx;
		--uni-font-size-17: 34rpx;
		--uni-font-size-18: 36rpx;
		--uni-font-size-19: 38rpx;
		--uni-font-size-20: 40rpx;
		--uni-font-size-21: 42rpx;
		--uni-font-size-22: 42rpx;
		--uni-font-size-23: 46rpx;
		--uni-font-size-24: 48rpx;
	}
	
	$uni-color-primary: --uni-primary-color;

	uni-page-body,
	html,
	body {
		margin: 0;
		padding: 0;
		border: 0;
		box-sizing: border-box;
		height: 100%;
	}

	page {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 100%;
		background-color: var(--uni-background-color);
	}

	button,
	view {
		font-size: var(--uni-font-size-14);
	}

	text {
		font-size: var(--uni-font-size-12);
	}

	input {
		color: var(--uni-gray-color) !important;
		font-size: var(--uni-font-size-14) !important;
	}

	radio {
		transform: scale(0.8) !important;
		padding: 0;
		margin: 0;
	}

	switch {
		transform: scale(0.75) !important;
		padding: 0;
		margin: 0;
	}

	.mg5 {
		margin: 5rpx !important;
	}

	.mg10 {
		margin: 10rpx !important;
	}
	
	.mg15 {
		margin: 15rpx !important;
	}

	.mg20 {
		margin: 20rpx !important;
	}
	
	.mg25 {
		margin: 25rpx !important;
	}

	.mg30 {
		margin: 30rpx !important;
	}

	.mg40 {
		margin: 40rpx !important;
	}

	.mg50 {
		margin: 50rpx !important;
	}

	.mv5 {
		margin-top: 5rpx !important;
		margin-bottom: 5rpx !important;
	}

	.mv10 {
		margin-top: 10rpx !important;
		margin-bottom: 10rpx !important;
	}

	.mv15 {
		margin-top: 15rpx !important;
		margin-bottom: 15rpx !important;
	}

	.mv20 {
		margin-top: 20rpx !important;
		margin-bottom: 20rpx !important;
	}
	
	.mv25 {
		margin-top: 25rpx !important;
		margin-bottom: 25rpx !important;
	}

	.mv30 {
		margin-top: 30rpx !important;
		margin-bottom: 30rpx !important;
	}

	.mv40 {
		margin-top: 40rpx !important;
		margin-bottom: 40rpx !important;
	}

	.mv50 {
		margin-top: 50rpx !important;
		margin-bottom: 50rpx !important;
	}

	.mh5 {
		margin-left: 5rpx !important;
		margin-right: 5rpx !important;
	}

	.mh10 {
		margin-left: 10rpx !important;
		margin-right: 10rpx !important;
	}

	.mh15 {
		margin-left: 15rpx !important;
		margin-right: 15rpx !important;
	}

	.mh20 {
		margin-left: 20rpx !important;
		margin-right: 20rpx !important;
	}

	.mh30 {
		margin-left: 30rpx !important;
		margin-right: 30rpx !important;
	}

	.mh40 {
		margin-left: 40rpx !important;
		margin-right: 40rpx !important;
	}

	.mh50 {
		margin-left: 50rpx !important;
		margin-right: 50rpx !important;
	}

	.mt5 {
		margin-top: 5rpx !important;
	}

	.mt10 {
		margin-top: 10rpx !important;
	}

	.mt15 {
		margin-top: 15rpx !important;
	}

	.mt20 {
		margin-top: 20rpx !important;
	}

	.mt25 {
		margin-top: 25rpx !important;
	}

	.mt30 {
		margin-top: 30rpx !important;
	}

	.mt35 {
		margin-top: 35rpx !important;
	}

	.mt40 {
		margin-top: 40rpx !important;
	}

	.mt50 {
		margin-top: 50rpx !important;
	}

	.mr5 {
		margin-right: 5rpx !important;
	}

	.mr10 {
		margin-right: 10rpx !important;
	}

	.mr15 {
		margin-right: 15rpx !important;
	}

	.mr20 {
		margin-right: 20rpx !important;
	}

	.mr25 {
		margin-right: 25rpx !important;
	}

	.mr30 {
		margin-right: 30rpx !important;
	}

	.mr35 {
		margin-right: 35rpx !important;
	}

	.mr40 {
		margin-right: 40rpx !important;
	}

	.mr50 {
		margin-right: 50rpx !important;
	}

	.mr100 {
		margin-right: 100rpx !important;
	}

	.mb5 {
		margin-bottom: 5rpx !important;
	}

	.mb10 {
		margin-bottom: 10rpx !important;
	}

	.mb15 {
		margin-bottom: 15rpx !important;
	}

	.mb20 {
		margin-bottom: 20rpx !important;
	}

	.mb25 {
		margin-bottom: 25rpx !important;
	}

	.mb30 {
		margin-bottom: 30rpx !important;
	}

	.mb40 {
		margin-bottom: 40rpx !important;
	}

	.mb50 {
		margin-bottom: 50rpx !important;
	}

	.mb100 {
		margin-bottom: 100rpx !important;
	}

	.ml5 {
		margin-left: 5rpx !important;
	}

	.ml10 {
		margin-left: 10rpx !important;
	}

	.ml15 {
		margin-left: 15rpx !important;
	}

	.ml20 {
		margin-left: 20rpx !important;
	}

	.ml25 {
		margin-left: 25rpx !important;
	}

	.ml30 {
		margin-left: 30rpx !important;
	}

	.ml35 {
		margin-left: 35rpx !important;
	}

	.ml40 {
		margin-left: 40rpx !important;
	}

	.ml50 {
		margin-left: 50rpx !important;
	}

	.p0 {
		padding: 0 !important;
	}

	.pd5 {
		padding: 5rpx !important;
	}

	.pd10 {
		padding: 10rpx !important;
	}
	
	.pd15 {
		padding: 15rpx !important;
	}

	.pd20 {
		padding: 20rpx !important;
	}

	.pd25 {
		padding: 25rpx !important;
	}

	.pd30 {
		padding: 30rpx !important;
	}

	.pd40 {
		padding: 40rpx !important;
	}

	.pd50 {
		padding: 50rpx !important;
	}

	.pv5 {
		padding-top: 5rpx !important;
		padding-bottom: 5rpx !important;
	}

	.pv10 {
		padding-top: 10rpx !important;
		padding-bottom: 10rpx !important;
	}

	.pv15 {
		padding-top: 15rpx !important;
		padding-bottom: 15rpx !important;
	}

	.pv20 {
		padding-top: 20rpx !important;
		padding-bottom: 20rpx !important;
	}
	
	.pv25 {
		padding-top: 25rpx !important;
		padding-bottom: 25rpx !important;
	}

	.pv30 {
		padding-top: 30rpx !important;
		padding-bottom: 30rpx !important;
	}
	
	.pv35 {
		padding-top: 35rpx !important;
		padding-bottom: 35rpx !important;
	}

	.pv40 {
		padding-top: 40rpx !important;
		padding-bottom: 40rpx !important;
	}

	.pv50 {
		padding-top: 50rpx !important;
		padding-bottom: 50rpx !important;
	}

	.ph5 {
		padding-left: 5rpx !important;
		padding-right: 5rpx !important;
	}

	.ph10 {
		padding-left: 10rpx !important;
		padding-right: 10rpx !important;
	}

	.ph15 {
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
	}

	.ph20 {
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
	}

	.ph25 {
		padding-left: 25rpx !important;
		padding-right: 25rpx !important;
	}

	.ph30 {
		padding-left: 30rpx !important;
		padding-right: 30rpx !important;
	}
	
	.ph35 {
		padding-left: 35rpx !important;
		padding-right: 35rpx !important;
	}

	.ph40 {
		padding-left: 40rpx !important;
		padding-right: 40rpx !important;
	}

	.ph50 {
		padding-left: 50rpx !important;
		padding-right: 50rpx !important;
	}

	.pt5 {
		padding-top: 5rpx !important;
	}

	.pt10 {
		padding-top: 10rpx !important;
	}

	.pt20 {
		padding-top: 20rpx !important;
	}

	.pt30 {
		padding-top: 30rpx !important;
	}

	.pt40 {
		padding-top: 40rpx !important;
	}

	.pt50 {
		padding-top: 50rpx !important;
	}

	.pr5 {
		padding-right: 5rpx !important;
	}

	.pr10 {
		padding-right: 10rpx !important;
	}

	.pr20 {
		padding-right: 20rpx !important;
	}

	.pr30 {
		padding-right: 30rpx !important;
	}

	.pr40 {
		padding-right: 40rpx !important;
	}

	.pr50 {
		padding-right: 50rpx !important;
	}

	.pb5 {
		padding-bottom: 5rpx !important;
	}

	.pb10 {
		padding-bottom: 10rpx !important;
	}

	.pb20 {
		padding-bottom: 20rpx !important;
	}

	.pb25 {
		padding-bottom: 25rpx !important;
	}

	.pb30 {
		padding-bottom: 30rpx !important;
	}

	.pb40 {
		padding-bottom: 40rpx !important;
	}

	.pb50 {
		padding-bottom: 50rpx !important;
	}

	.pl5 {
		padding-left: 5rpx !important;
	}

	.pl10 {
		padding-left: 10rpx !important;
	}

	.pl20 {
		padding-left: 20rpx !important;
	}

	.pl30 {
		padding-left: 30rpx !important;
	}

	.pl40 {
		padding-left: 40rpx !important;
	}

	.pl50 {
		padding-left: 50rpx !important;
	}

	.fs9 {
		font-size: var(--uni-font-size-9) !important;
	}

	.fs10 {
		font-size: var(--uni-font-size-10) !important;
	}

	.fs11 {
		font-size: var(--uni-font-size-11) !important;
	}

	.fs12 {
		font-size: var(--uni-font-size-12) !important;
	}

	.fs13 {
		font-size: var(--uni-font-size-13) !important;
	}

	.fs14 {
		font-size: var(--uni-font-size-14) !important;
	}

	.fs15 {
		font-size: var(--uni-font-size-15) !important;
	}

	.fs16 {
		font-size: var(--uni-font-size-16) !important;
	}

	.fs17 {
		font-size: var(--uni-font-size-17) !important;
	}

	.fs18 {
		font-size: var(--uni-font-size-18) !important;
	}

	.fs20 {
		font-size: var(--uni-font-size-20) !important;
	}

	.fs21 {
		font-size: var(--uni-font-size-21) !important;
	}

	.fs22 {
		font-size: var(--uni-font-size-22) !important;
	}

	.fs23 {
		font-size: var(--uni-font-size-23) !important;
	}

	.fs24 {
		font-size: var(--uni-font-size-24) !important;
	}

	.font-bold {
		// font-size:50rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 700 !important;
	}
	
	.font-normal {
		font-weight: normal !important;
	}

	.w10 {
		width: 10% !important;
	}

	.w20 {
		width: 20% !important;
	}
	
	.w25 {
		width: 25% !important;
	}

	.w30 {
		width: 30% !important;
	}

	.w40 {
		width: 40% !important;
	}
	
	.w45 {
		width: 45% !important;
	}

	.w50 {
		width: 50% !important;
	}

	.w60 {
		width: 60% !important;
	}

	.w65 {
		width: 65% !important;
	}

	.w70 {
		width: 70% !important;
	}

	.w80 {
		width: 80% !important;
	}

	.w90 {
		width: 90% !important;
	}

	.w100 {
		width: 100% !important;
	}

	.h10 {
		height: 20rpx !important;
		line-height: 20rpx !important;
	}

	.h12 {
		height: 24rpx !important;
		line-height: 24rpx !important;
	}

	.h15 {
		height: 30rpx !important;
		line-height: 30rpx !important;
	}

	.h20 {
		height: 40rpx !important;
		line-height: 40rpx !important;
	}

	.h25 {
		height: 50rpx !important;
		line-height: 50rpx !important;
	}

	.h30 {
		height: 60rpx !important;
		line-height: 60rpx !important;
	}

	.h35 {
		height: 70rpx !important;
		line-height: 70rpx !important;
	}

	.h40 {
		height: 80rpx !important;
		line-height: 80rpx !important;
	}

	.h45 {
		height: 90rpx !important;
		line-height: 90rpx !important;
	}

	.h50 {
		height: 100rpx !important;
		line-height: 100rpx !important;
	}

	.lh1 {
		line-height: 1 !important;
	}

	.lh125 {
		line-height: 1.25 !important;
	}

	.lh15 {
		line-height: 1.5 !important;
	}

	.lh175 {
		line-height: 1.75 !important;
	}

	.lh185 {
		line-height: 1.85 !important;
	}

	.lh2 {
		line-height: 2 !important;
	}

	.text-primary {
		color: var(--uni-primary-color) !important;
	}

	.text-success {
		color: var(--uni-success-color) !important;
	}

	.text-warning {
		color: var(--uni-warning-color) !important;
	}

	.text-danger {
		color: var(--uni-danger-color) !important;
	}
	
	.text-dark {
		color: var(--uni-dark-color) !important;
	}

	.text-disabled {
		color: var(--uni-disabled-color) !important;
	}

	.text-purple {
		color: var(--uni-purple-color) !important;
	}

	.text-white {
		color: var(--uni-white-color) !important;
	}

	.text-dim-gray {
		color: var(--uni-dim-gray-color) !important;
	}

	.text-gray {
		color: var(--uni-gray-color) !important;
	}

	.text-black {
		color: var(--uni-black-color) !important;
	}

	.text-blue {
		color: var(--uni-blue-color) !important;
	}

	.text-pink {
		color: var(--uni-pink-color) !important;
	}

	.text-left {
		text-align: left !important !important;
	}

	.text-center {
		text-align: center !important;
	}

	.text-right {
		text-align: right !important;
	}

	.br10 {
		border-radius: 10rpx !important;
	}

	.br15 {
		border-radius: 15rpx !important;
	}

	.br20 {
		border-radius: 20rpx !important;
	}

	.br30 {
		border-radius: 30rpx !important;
	}

	.br40 {
		border-radius: 40rpx !important;
	}

	.br50 {
		border-radius: 50rpx !important;
	}

	.circular {
		border-radius: 50% !important;
	}

	.btn {
		border: none !important;
	}

	.btn-full {
		width: 80%;
		margin: 0 auto;
	}

	.btn-half {
		width: 40%;
		margin: 0 auto;
	}
	
	.btn-small {
		width: 20%;
		margin: 0 auto;
	}
	
	.btn-white {
		border: 1px solid var(--uni-white-color) !important;
		background-color: var(--uni-white-color) !important;
	}

	.btn-primary {
		border: 1px solid var(--uni-primary-color) !important;
		background-color: var(--uni-primary-color) !important;
	}

	.btn-success {
		border: 1px solid var(--uni-success-color) !important;
		background-color: var(--uni-success-color) !important;
	}

	.btn-danger {
		border: 1px solid var(--uni-danger-color) !important;
		background-color: var(--uni-danger-color) !important;
	}

	.btn-warning {
		border: 1px solid var(--uni-warning-color) !important;
		background-color: var(--uni-warning-color) !important;
	}
	
	.btn-dark {
		border: 1px solid var(--uni-dark-color) !important;
		background-color: var(--uni-dark-color) !important;
	}

	.btn-disabled {
		border: 1px solid var(--uni-disabled-color) !important;
		background-color: var(--uni-disabled-color) !important;
	}

	.btn-black {
		border: 1px solid var(--uni-black-color) !important;
		background-color: var(--uni-black-color) !important;
	}

	.btn-gray {
		border: 1px solid var(--uni-gray-color) !important;
		background-color: var(--uni-gray-color) !important;
	}
	
	.background-transparent {
		background-color: transparent !important;
	}

	.background-color-primary {
		background-color: var(--uni-primary-color) !important;
	}

	.background-color-success {
		background-color: var(--uni-success-color) !important;
	}

	.background-color-warning {
		background-color: var(--uni-warning-color) !important;
	}

	.background-color-danger {
		background-color: var(--uni-danger-color) !important;
	}
	
	.background-color-dark {
		background-color: var(--uni-dark-color) !important;
	}

	.background-color-disabled {
		background-color: var(--uni-disabled-color) !important;
	}

	.background-color-white {
		background-color: var(--uni-white-color) !important;
	}

	.background-color-black {
		background-color: var(--uni-black-color) !important;
	}

	.background-color-blue {
		background-color: var(--uni-blue-color) !important;
	}

	.background-color {
		background-color: var(--uni-background-color) !important;
	}

	.btn-border {
		border: none !important;
		background-color: var(--uni-white-color) !important;
		color: var(--uni-black-color) !important;
	}

	.border-primary {
		border: 1px solid var(--uni-primary-color) !important;
		color: var(--uni-primary-color)!important;
	}

	.border-success {
		border: 1px solid var(--uni-success-color) !important;
		color: var(--uni-success-color)!important;
	}

	.border-warning {
		border: 1px solid var(--uni-warning-color) !important;
		color: var(--uni-warning-color) !important;
	}

	.border-danger {
		border: 1px solid var(--uni-danger-color) !important;
		color: var(--uni-danger-color) !important;
	}
	
	.border-dark {
		border: 1px solid var(--uni-dark-color) !important;
		color: var(--uni-dark-color) !important;
	}
	
	.border-white {
		border: 1px solid var(--uni-white-color) !important;
		color: var(--uni-white-color) !important;
	}

	.border-disabled {
		border: 1px solid var(--uni-disabled-color) !important;
		color: var(--uni-disabled-color) !important;
	}

	.border-black {
		border: 1px solid var(--uni-black-color) !important;
		color: var(--uni-black-color) !important;
	}

	.border-blue {
		border: 1px solid var(--uni-blue-color) !important;
		color: var(--uni-blue-color) !important;
	}
	
	.tags {
		border: none !important;
		background-color: #eff6fe !important;
		color: var(--uni-primary-color) !important;
	}

	.tags-primary {
		background-color: #eff6fe !important;
		color: var(--uni-primary-color) !important;
	}

	.tags-success {
		background-color: #effcf6 !important;
		color: var(--uni-success-color)!important;
	}

	.tags-warning {
		background-color: #fff8ee !important;
		color: var(--uni-warning-color) !important;
	}

	.tags-danger {
		background-color: #fff2ef !important;
		color: var(--uni-danger-color) !important;
	}
	
	.tags-purple {
		background-color: #f9f0fe !important;
		color: var(--uni-purple-color) !important;
	}
	
	.tags-dark {
		background-color: var(--uni-dark-color) !important;
		color: var(--uni-dark-color) !important;
	}
	
	.tags-disabled {
		background-color: var(--uni-background-color) !important;
		color: var(--uni-disabled-color) !important;
	}
	
	.white-space {
		white-space: nowrap;
	}
	
	.word-break {
		word-break: break-word;
	}

	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.space-between {
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.space-around {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.justify-content-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex {
		display: flex !important;
	}

	.flex-start {
		display: flex;
		align-items: center;
		justify-content: flex-start
	}

	.flex-start-top {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start
	}
	
	.flex-start-middle {
		display: flex;
		align-items: center;
		justify-content: flex-start
	}

	.flex-end {
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.flex-end-top {
		display: flex;
		align-items: flex-start;
		justify-content: flex-end
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	// 反向换行
	.flex-wrap-reverse {
		flex-wrap: wrap-reverse;
	}

	// 主轴中间对齐
	.flex-center {
		justify-content: center
	}

	// 主轴等比间距
	.flex-between {
		justify-content: space-between
	}

	// 主轴均分间距
	.flex-around {
		justify-content: space-around
	}

	// 交叉轴起点对齐
	.flex-items-start {
		align-items: flex-start
	}

	// 交叉轴中间对齐
	.flex-items-center {
		align-items: center
	}

	// 交叉轴终点对齐
	.flex-items-end {
		align-items: flex-end
	}

	// 交叉轴第一行文字基线对齐
	.flex-items-baseline {
		align-items: baseline
	}

	// 交叉轴方向拉伸对齐
	.flex-items-stretch {
		align-items: stretch
	}

	// 子元素交叉轴起点对齐
	.flex-self-start {
		align-self: flex-start
	}

	// 子元素交叉轴居中对齐
	.flex-self-center {
		align-self: center
	}

	// 子元素交叉轴终点对齐
	.flex-self-end {
		align-self: flex-end
	}

	// 子元素交叉轴第一行文字基线对齐
	.flex-self-baseline {
		align-self: baseline
	}

	// 子元素交叉轴方向拉伸对齐
	.flex-self-stretch {
		align-self: stretch
	}

	// 起点对齐
	.flex-content-start {
		align-content: flex-start
	}

	// 居中对齐
	.flex-content-center {
		align-content: center
	}

	// 终点对齐
	.flex-content-end {
		align-content: flex-end
	}

	// 两端对齐
	.flex-content-between {
		align-content: space-between
	}

	// 均分间距
	.flex-content-around {
		align-content: space-around
	}

	// 全部居中对齐
	.flex-middle {
		justify-content: center;
		align-items: center;
		align-self: center;
		align-content: center
	}

	// 是否可放大
	.flex-grow {
		flex-grow: 1
	}

	// 是否可缩小
	.flex-shrink {
		flex-shrink: 1
	}

	.max-height-100 {
		max-height: 100rpx !important;
	}

	.max-height-200 {
		max-height: 200rpx !important;
	}

	.max-height-300 {
		max-height: 300rpx !important;
	}

	.max-height-400 {
		max-height: 400rpx !important;
	}

	.max-height-500 {
		max-height: 500rpx !important;
	}

	.max-height-600 {
		max-height: 600rpx !important;
	}

	.max-height-700 {
		max-height: 700rpx !important;
	}

	.max-height-800 {
		max-height: 800rpx !important;
	}
	
	[class*=animation-] {
		animation-duration: .35s;
		animation-timing-function: ease-out;
		animation-fill-mode: both
	}

	.animation-fade {
		animation-name: fade;
		animation-duration: .8s;
		animation-timing-function: linear
	}

	.animation-scale-up {
		animation-name: scale-up
	}

	.animation-scale-down {
		animation-name: scale-down
	}

	.animation-slide-top {
		animation-name: slide-top
	}

	.animation-slide-bottom {
		animation-name: slide-bottom
	}

	.animation-slide-left {
		animation-name: slide-left
	}

	.animation-slide-right {
		animation-name: slide-right
	}

	.animation-shake {
		animation-name: shake
	}

	.animation-reverse {
		animation-direction: reverse
	}

	.animation-spin {
		-webkit-animation: wlIcon-spin 2s infinite linear;
		animation: wlIcon-spin 2s infinite linear;
		display: inline-block;
	}

	.animation-pulse {
		-webkit-animation: wlIcon-spin 1s infinite steps(8);
		animation: wlIcon-spin 1s infinite steps(8);
		display: inline-block;
	}

	@keyframes wlIcon-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}

		100% {
			-webkit-transform: rotate(359deg);
			transform: rotate(359deg);
		}
	}

	@keyframes fluctuate {
		0% {
			opacity: 0.5;
			transform: translateY(-50rpx);
		}

		100% {
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes fade {
		0% {
			opacity: 0
		}

		100% {
			opacity: 1
		}
	}

	@keyframes scale-up {
		0% {
			opacity: 0;
			transform: scale(.2)
		}

		100% {
			opacity: 1;
			transform: scale(1)
		}
	}

	@keyframes scale-down {
		0% {
			opacity: 0;
			transform: scale(1.8)
		}

		100% {
			opacity: 1;
			transform: scale(1)
		}
	}

	@keyframes slide-top {
		0% {
			opacity: 0;
			transform: translateY(-100%)
		}

		100% {
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes slide-bottom {
		0% {
			opacity: 0;
			transform: translateY(100%)
		}

		100% {
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}

	@keyframes slide-left {
		0% {
			opacity: 0;
			transform: translateX(-100%)
		}

		100% {
			opacity: 1;
			transform: translateX(0)
		}
	}

	@keyframes slide-right {
		0% {
			opacity: 0;
			transform: translateX(100%)
		}

		100% {
			opacity: 1;
			transform: translateX(0)
		}
	}
